<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>JavaScript脚本 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="JavaScript Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="JavaScript Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
 
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      

      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active"> <a class="bd-toc-link" href="../docs.html">快速入门</a>
          <ul class="nav bd-sidenav">
            <li><a href="../docs.html">关于</a></li>
            <li><a href="download.html">下载</a></li>
            <li><a href="contents.html">目录结构</a></li>
            <li><a href="browsers-devices.html">浏览器与设备调优</a></li>
            <li class="active bd-sidenav-active"><a href="javascript.html">JavaScript脚本</a></li>
            <li><a href="theming.html">主题化</a></li>
            <li><a href="build-tools.html">编译工具</a></li>
            <li><a href="webpack.html"> Webpack模块化</a></li>
            <li><a href="accessibility.html">无障碍浏览</a></li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html">布局</a>
          <ul class="nav bd-sidenav">
            <li><a href="../layout/overview.html">概览</a></li>
            <li><a href="../layout/grid.html">栅格</a></li>
            <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../content/reboot.html">内容 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../content/reboot.html"> 初始化与CSS重置 </a> </li>
            <li> <a href="../content/typography.html"> 排版 </a> </li>
            <li> <a href="../content/code.html"> 代码 </a> </li>
            <li> <a href="../content/images.html"> 图片 </a> </li>
            <li> <a href="../content/tables.html"> 表格 </a> </li>
            <li> <a href="../content/figures.html"> 图文框 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
          <ul class="nav bd-sidenav">
    <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../utilities/borders.html"> 边框(border) </a> </li>
            <li> <a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
            <li> <a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
            <li> <a href="../utilities/colors.html"> 颜色(color) </a> </li>
            <li> <a href="../utilities/display.html"> Display显示属性 </a> </li>
            <li> <a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
            <li> <a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
            <li> <a href="../utilities/float.html"> Float浮动属性 </a> </li>
            <li> <a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
			<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
            <li> <a href="../utilities/position.html"> 固顶(底）及定位 </a> </li>
            <li> <a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders) </a> </li>
			<li><a href="../utilities/shadows.html"> 阴影(shadows) </a> </li>
            <li> <a href="../utilities/sizing.html"> 规格(sizi) </a> </li>
            <li> <a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
            <li> <a href="../utilities/text.html"> 文本处理 </a> </li>
            <li> <a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
            <li> <a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/approach.html"> 延伸 </a>
          <ul class="nav bd-sidenav">
            <li><a href="../extend/approach.html"> 方法论 </a> </li>
            <li> <a href="../extend/icons.html"> 图标 </a> </li>
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
          <ul class="nav bd-sidenav">
          </ul>
        </div>
        <div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
          <ul class="nav bd-sidenav">
            <li> <a href="../about/history.html"> 成长历史 </a> </li>
            <li> <a href="../about/team.html"> 项目团队 </a> </li>
            <li> <a href="../about/brand.html"> 品牌标志 </a> </li>
            <li> <a href="../about/license.html"> 许可授权 </a> </li>
            <li> <a href="../about/translations.html"> 翻译 </a> </li>
          </ul>
        </div>
      </nav>

    </div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#individual-or-compiled">单个引用或者编译</a></li>
    <li class="toc-entry toc-h2"><a href="#dependencies">依赖关系</a></li>
    <li class="toc-entry toc-h2"><a href="#data-attributes">数据属性</a></li>
    <li class="toc-entry toc-h2"><a href="#events">JS事件(Events)</a></li>
    <li class="toc-entry toc-h2"><a href="#programmatic-api">编程化的API</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#asynchronous-functions-and-transitions">异步函数和转换</a></li>
        <li class="toc-entry toc-h3"><a href="#default-settings">默认设置</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#no-conflict">无冲突处理</a></li>
    <li class="toc-entry toc-h2"><a href="#version-numbers">版本管理</a></li>
    <li class="toc-entry toc-h2"><a href="#no-special-fallbacks-when-javascript-is-disabled">当JavaScript被禁用时，没有特殊的回调机制</a>
      <ul>
        <li class="toc-entry toc-h4"><a href="#third-party-libraries">第三方库</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#util">Util方法</a></li>
	<li class="toc-entry toc-h2"><a href="#sanitizer">清理器</a></li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">JavaScript 脚本</h1>
  <p class="bd-lead">Bootstrap 包括一些 JavaScript 帮助用户做出更加充满生机、活动的项目。欢迎学习更多关于如何去调用动态事件、灵活展示的数据和编程性的API选项等。</p>
   
  <h2 id="individual-or-compiled">单个引用或者编译</h2>
  <p>插件可以单独包含（使用Bootstrap的单独<code class="highlighter-rouge">js/dist/*.js）</code>，也可以使用<code class="highlighter-rouge">bootstrap.js</code>或缩小的<code class="highlighter-rouge">bootstrap.min.js</code>（不包括两者）一次性包含。</p>
  <p>如果使用bundler（Webpack，Rollup ...），则可以使用UMD就绪的<code class="highlighter-rouge">/js/dist/*.js</code>文件。</p>
    <h2 id="dependencies">依赖关系</h2>
    <p>一些插件和CSS组件依赖于其它插件，这在系统中是被允许的。如果你要单个调用插件，请先在文档中检查它们的依赖关系。还要注意，所有插件都依赖于<strong>jQuery</strong>（即<strong>jQuery</strong>必须在所有JS插件文件之前调用）。参考 <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">Consult our <code class="highlighter-rouge">package.json</code></a>可以以了解哪些详尽版本的jQuery是被支持的。<br/>
比如下拉菜单dropdowns、提示组件popovers、冒泡组件等都提依赖于<a href="https://popper.js.org/">Popper.js</a>。</p>
  <h2 id="data-attributes">数据属性</h2>
  <p>通过HTML的数据属性几乎能启用并配置所有的Bootstrap插件（我们更倾向于函数化地使用JavaScript）。，住只能在<strong>单个元素上使用一套数据属性</strong>（例如，不能在一个按钮上同时触发一个工具提示和一个模态框）。</p>
  <p>在某些情况下，可能需要禁用此功能。要禁用数据属性API，可用下面的方法在文档中解绑所有的带<code class="highlighter-rouge">data-api</code>命名空间的事件：</p>
  </p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span></code></pre>
  </figure>
  <p>如需要指向特定的插件，只需要在调用插件的全名空间上拼接<code class="highlighter-rouge">data-api</code>作为命名空间，如下所示：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span></code></pre>
  </figure>
  <div class="bd-callout bd-callout-warning">
<h2 id="selectors">选择器</h2>

<p>出于性能的考虑，为了能够准确查询DOM元素，我们使用原生的<code class="highlighter-rouge">querySelector</code> 和 <code class="highlighter-rouge">querySelectorAll</code> 方法，因此你必须使用 <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>。如果使用特殊的选择器，如 <code class="highlighter-rouge">collapse:Example</code>注意将其转义，避免与JQuery方法冲突。</p>
</div>
  <h2 id="events">JS事件(Event)</h2>
  <p>Bootstrap为大多数插件的独一无二的行为提供了自定义事件。通常情况下，这里会有动词不定式和过去分词形式—如果在事件的开始触发了它的动词不定式（如<code class="highlighter-rouge">show</code>），而shown在完成某个动作后触发其过去分词形式（如<code class="highlighter-rouge">shown</code>）。</p>
  <p>所有不定式事件都提供<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code class="highlighter-rouge">preventDefault()</code></a>功能，从而使开发者设计一个动作开始之前就能终止它的执行。从事件处理程序返回false同样也是自动调用<code class="highlighter-rouge">preventDefault()</code>功能。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span>
  <span class="p">}</span>
<span class="p">})</span></code></pre>
  </figure>
  <h2 id="programmatic-api">编程化的API</h2>
  <p>我们还相信，你能够纯粹通过JavaScript API来使用所有的Bootstrap插件。所有的公共的API都是单一的，可链接的方法，并返回执行的集合。</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span></code></pre>
  </figure>
  <p>所有的方法都能够接收一个可取舍的options对象、一个指向特定方法的字符串，或者不接收参数（不带参数地调用这个方法将用默认行为初始化一个插件）：
</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span>                      <span class="c1">// initialized with defaults</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span>   <span class="c1">// initialized with no keyboard</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>                <span class="c1">// initializes and invokes show immediately</span></code></pre>
  </figure>
  <p>每个插件都需要在<code class="highlighter-rouge">Constructor</code>属性上明文曝露它的原始构造函数<code class="highlighter-rouge">$.fn.popover.Constructor</code>。如果你想获得一个特定的插件实例，可以从一个元素中直接获得它：<code class="highlighter-rouge">$('[rel="popover"]').data('popover')</code>。</p>
  <h3 id="asynchronous-functions-and-transitions">异步函数和转换</h3>
  <p>All programmatic API methods are <strong>asynchronous</strong> and returns to the caller once the transition is started but <strong>before it ends</strong>.</p>
  <p>所有编程化的API方法均为异步，一旦转换开始并在结束之前返回给调用者。如果需要在转换完成后执行动作，您可以收听相应的事件（进行侦听并作出下一步的编程）：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapse'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// Action to execute once the collapsible area is expanded</span>
<span class="p">})</span></code></pre>
  </figure>
  <p>另外，<strong>transition过渡组件上的方法</strong>调用将被忽略:</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'slid.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// Will slide to the slide 2 as soon as the transition to slide 1 is finished</span>
<span class="p">})</span>

<span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'1'</span><span class="p">)</span> <span class="c1">// Will start sliding to the slide 1 and returns to the caller</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// !! Will be ignored, as the transition to the slide 1 is not finished !!</span></code></pre>
  </figure>
  <h3 id="default-settings">默认设置</h3>
  <p>用户可以通过修改插件的 <code class="highlighter-rouge">Constructor.Default</code>对象来更改插件的默认设置：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="c1">// changes default for the modal plugin's `keyboard` option to false</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span></code></pre>
  </figure>
  <h2 id="no-conflict">无冲突处理</h2>
  <p>有时，必须使用Bootstrap插件和其他UI框架。在这种情况下，偶尔会发生命名空间冲突。如果发生这种情况，您可以调用<code class="highlighter-rouge">.noConflict</code>恢复插件的值：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span>            <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre>
  </figure>
  <h2 id="version-numbers">版本管理</h2>
  <p>每个Bootstrap的jQuery插件的版本都可以通过<code class="highlighter-rouge">VERSION</code>插件的构造函数的属性访问。如对于<code class="highlighter-rouge">tooltip</code>工具提示插件：</p>
  <figure class="highlight">
    <pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "4.3.1"</span></code></pre>
  </figure>
  <h2 id="no-special-fallbacks-when-javascript-is-disabled">当JavaScript被禁用时，没有特殊的回调机制</h2>
  <p>Bootstrap插件在JavaScript被禁用时没有特殊的回调方式。如果你比较关心用户体验的话，可用<code class="highlighter-rouge">&lt;noscript&gt;</code>向你的用户解释情况（以及指引如何重新开启 JavaScript），然后/或者添加自定义回调机制。</p>
  <div class="bd-callout bd-callout-warning">
    <h4 id="third-party-libraries">第三方库</h4>
    <p><strong>Bootstrap并不正式支持第三方的JavaScript库</strong>，比如Prototype或者jQuery UI。尽管有系统中<code class="highlighter-rouge">.noConflic</code>和命名空间事件，但如果混合引用可能会带来兼容性问题（高手不怕脏和累、并自行修复BUG条件下，请自便:）。</p>
  </div>
  <h2 id="util">Util方法</h2>
  <p>默认<code class="highlighter-rouge">bootstrap.js</code>（预编译与精简版）都已经包含了<code class="highlighter-rouge">util.js</code>，因为Bootstrap所有JavaScript行为都依赖于<code class="highlighter-rouge">util.js</code>函数。</p>
  <p><code class="highlighter-rouge">util.js</code>包括效用函数和<code class="highlighter-rouge">transitionEnd</code>事件的基本帮助器以及CSS转换仿真器。它被其他插件用于检查CSS过渡支持并捕获挂起的过渡。</p>
  <h2 id="sanitizer"><span class="bd-content-title">清理器</span></h2>
  <p>工具提示和弹出窗口使用我们的内置清理器来清理接受HTML的选项。</p>
  <p>默认的<code class="highlighter-rouge">whiteList</code>值如下:</p>
  <div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
  <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span> <span class="o">=</span> <span class="sr">/^aria-</span><span class="se">[\w</span><span class="sr">-</span><span class="se">]</span><span class="sr">*$/i</span>
<span class="kd">var</span> <span class="nx">DefaultWhitelist</span> <span class="o">=</span> <span class="p">{</span>
  <span class="c1">// Global attributes allowed on any supplied element below.</span>
  <span class="s1">'*'</span><span class="p">:</span> <span class="p">[</span><span class="s1">'class'</span><span class="p">,</span> <span class="s1">'dir'</span><span class="p">,</span> <span class="s1">'id'</span><span class="p">,</span> <span class="s1">'lang'</span><span class="p">,</span> <span class="s1">'role'</span><span class="p">,</span> <span class="nx">ARIA_ATTRIBUTE_PATTERN</span><span class="p">],</span>
  <span class="na">a</span><span class="p">:</span> <span class="p">[</span><span class="s1">'target'</span><span class="p">,</span> <span class="s1">'href'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'rel'</span><span class="p">],</span>
  <span class="na">area</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">b</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">br</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">col</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">code</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">div</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">em</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">hr</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h1</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h2</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h3</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h4</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h5</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">h6</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">i</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">img</span><span class="p">:</span> <span class="p">[</span><span class="s1">'src'</span><span class="p">,</span> <span class="s1">'alt'</span><span class="p">,</span> <span class="s1">'title'</span><span class="p">,</span> <span class="s1">'width'</span><span class="p">,</span> <span class="s1">'height'</span><span class="p">],</span>
  <span class="na">li</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">ol</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">p</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">pre</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">s</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">small</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">span</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">sub</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">sup</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">strong</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">u</span><span class="p">:</span> <span class="p">[],</span>
  <span class="na">ul</span><span class="p">:</span> <span class="p">[]</span>
<span class="p">}</span></code></pre></figure>
<p>如果要向此默认<code class="highlighter-rouge">whiteList</code>添加新值，可以执行以下操作:</p>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">myDefaultWhiteList</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">whiteList</span>

<span class="c1">// To allow table elements</span>
<span class="nx">myDefaultWhiteList</span><span class="p">.</span><span class="nx">table</span> <span class="o">=</span> <span class="p">[]</span>

<span class="c1">// To allow td elements and data-option attributes on td elements</span>
<span class="nx">myDefaultWhiteList</span><span class="p">.</span><span class="nx">td</span> <span class="o">=</span> <span class="p">[</span><span class="s1">'data-option'</span><span class="p">]</span>

<span class="c1">// You can push your custom regex to validate your attributes.</span>
<span class="c1">// Be careful about your regular expressions being too lax</span>
<span class="kd">var</span> <span class="nx">myCustomRegex</span> <span class="o">=</span> <span class="sr">/^data-my-app-</span><span class="se">[\w</span><span class="sr">-</span><span class="se">]</span><span class="sr">+/</span>
<span class="nx">myDefaultWhiteList</span><span class="p">[</span><span class="s1">'*'</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">myCustomRegex</span><span class="p">)</span></code></pre><p>If you want to add new values to this default <code class="highlighter-rouge">whiteList</code> you can do the following:</p></figure>
<p>如果您想绕过我们的清理器,例如<a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>,则应执行以下操作:</p>
<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="" data-original-title="Copy to clipboard">Copy</button></div>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#yourTooltip'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span>
  <span class="na">sanitizeFn</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">DOMPurify</span><span class="p">.</span><span class="nx">sanitize</span><span class="p">(</span><span class="nx">content</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">})</span></code></pre></figure>

</main>
</div>
</div>

<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
	inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 

</body>
</html>
